import React,{Component} from 'react';
import {connect} from 'react-redux';
import { hashHistory } from 'react-router';
import HeaderBar from '../../components/headerNav/headBar'
import cookie from 'react-cookie'
import {Dialog} from 'react-weui'
import {port} from '../../public'
import {timestampFormat} from '../../public/index'

// 导入图片
import phone from '../../img/icon/iconfont-phone.svg'
import next from '../../img/icon/nextPage.svg'


import './enrollOrderDetail.css'

export default class EnrollOrderDetail extends Component{
    constructor(props){
        super(props);
        this.state={
            minPic:this.props.location.query.minPic,
            title:this.props.location.query.title,
            status:this.props.location.query.status,
            createTime:this.props.location.query.createTime,
            skuId:this.props.location.query.skuId,
            phone:this.props.location.query.phone,
            id:this.props.location.query.id,
            name:this.props.location.query.name,
            skuPhone:this.props.location.query.phone,
            code:this.props.location.query.code,
            number:'',
            ticketsList:[],
            connectPhone:'',
            connectName:'',
            dialogDetail:'确定要申请退款吗？',
            style2: {
                title: '申请退款',
                buttons: [
                    {
                        type: 'default',
                        label: '取消',
                        onClick: this.hideDialog.bind(this)
                    },
                    {
                        type: 'primary',
                        label: '确认',
                        onClick: this.reject.bind(this)
                    }
                ]
            },
            cancelStyle2: {
                title: '取消订单',
                buttons: [
                    {
                        type: 'default',
                        label: '取消',
                        onClick: this.hideDialog2.bind(this)
                    },
                    {
                        type: 'primary',
                        label: '确认',
                        onClick: this.cancelOrder.bind(this)
                    }
                ]
            }
        }
    }

    hideDialog() {
        this.setState({
            showIOS2: false
        });
    }

    hideDialog2(){
        this.setState({
            showIOS3:false
        })
    }

    componentDidMount(){
        // this.getDetail();
        try{
            let token = window.getNativeAppToken();
            if(window.isNativeApp()){
                cookie.save('userId',token)
            }
        }catch (e){

        }

        try{
            let token = window.handler.getNativeAppToken();
            if(window.handler.isNativeApp()){
                cookie.save('userId',token)
            }
        }catch (e){

        }
    }

    // getDetail(){
    //     let url=port+'/card/productOrderv2/'+this.state.id+'?token='+cookie.load('userId')+'&etype=2';
    //     fetch(url).then( res =>{
    //         return res.json();
    //     })
    //         .then( json =>{
    //             this.setState({
    //                 number:json.data.number,
    //                 title:json.data.productv2Model.title,
    //                 connectName:json.data.productv2Model.connectName,
    //                 connectPhone:json.data.productv2Model.phone,
    //                 ticketsList:json.data.ticketv2Models,
    //                 status:json.data.status,
    //                 createTime:json.data.createTime,
    //                 pic:json.data.productv2Model.pic,
    //                 connectName:json.data.productv2Model.connectName,
    //                 phone:json.data.phone
    //             })
    //                 .catch( e =>{
    //                     console.log(e);
    //                 })
    //         })
    // }

    getTickets(){
        let url=port+'/card/productTicketv2/'+this.state.id;
        fetch(url).then( res =>{
            return res.json();
        })
            .then( json =>{
                this.setState({

                })
            })
            .catch( e =>{
                console.log(e);
            })
    }

    getTicketsStatus(status){
        switch (status){
            case 0:
                return '未使用';
                break;
            case 1:
                return '已使用';
                break;
        }
    }

    getStatus(status){
        let statusStr;
        switch (status){
            case 0:
                statusStr='待使用'
                break;
            case 1:
                statusStr='已完成'
                break;
        }
        return statusStr;
    }

    getTimeStr(){

    }

    gotoIcbcPay(id){
        fetch( port+'/card/icbc/api/pay/'+id+'?type=2' ).then( res =>{
            return res.json()
        }).then( json =>{
            if(json.code>300){
                alert(json.message);
                return;
            }else{
                window.location.href=port+'/card/icbc/api/pay/'+id+'?type=2';
            }
        }).catch( e=>{
            window.location.href=port+'/card/icbc/api/pay/'+id+'?type=2';
        })
    }

    callPhone(){
        window.hybrid_app.callPhoneNumber(this.state.sKuPhone)
    }

    reject(){
        //
        // let url=port+'/card/productOrderv2/update/reject/'+this.state.id+'?token='+cookie.load('userId');
        // fetch( url ,{
        //     method: 'PUT',
        //     headers: {
        //         'Content-Type': 'application/json',
        //         'Accept':'application/json'
        //     }}).then( res =>{
        //     return res.json()
        // }).then( json =>{
        //     this.hideDialog();
        //     if(json.code===202||json.code==='202'){
        //         alert('退款申请成功');
        //         // this.getDetail();
        //     }else{
        //         alert('退款申请失败')
        //     }
        // }).catch( e=>{
        //     alert(e)
        // })
    }

    cancelOrder(){

        let url=port+'/card/productOrderv2/update/'+this.state.id+'?token='+cookie.load('userId');
        fetch( url ,{
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'Accept':'application/json'
            }}).then( res =>{
            return res.json()
        }).then( json =>{
            this.hideDialog2();
            if(json.code===202||json.code==='202'){
                // this.getDetail();
            }else{
                alert('订单取消失败')
            }
        }).catch( e=>{
            alert(e)
        })
    }

    render(){
        return(
            <div>
                {/*{*/}
                    {/*!(this.props.location.query.token||this.state.isIOsApp) &&*/}
                    {/*<HeaderBar type="3" content="订单详情" showBack="true"></HeaderBar>*/}

                {/*}*/}

                <div className="BOorder1" style={{marginTop:0}}>
                    <div className="BOorderInfo">
                        <h3><label>下单时间:</label><span>{timestampFormat(this.state.createTime,3)}</span></h3>
                    </div>
                    <div className="BOorderStatus">
                        <span>{this.state.status==1?'待使用':'已完成'}</span>
                        {/*{*/}
                            {/*this.state.status===1&&*/}
                            {/*<div className="returnMoney" onClick={()=>{this.setState({ showIOS2: true})}}>*/}
                                {/*申请退款*/}
                            {/*</div>*/}
                        {/*}*/}
                        {/*{*/}
                            {/*this.state.status===0&&*/}
                            {/*<div className="returnMoney" onClick={()=>{this.setState({ showIOS3: true})}}>*/}
                                {/*取消订单*/}
                            {/*</div>*/}
                        {/*}*/}
                    </div>

                </div>
                {
                <div className="BOorder2">
                    <div className="BOorderInfo">
                        <div className="BOorderTicket">
                          <span>
                            <img src=""/>
                          </span>
                            <span className="ticketStyle">劵码</span><span className="graycolor">(有效期至{this.state.ticketsList.length!=0?timestampFormat(this.state.ticketsList[0].time,2):"2017-12-31"})</span>
                        </div>
                        <p className="tips">温馨提示: 到店消费时,向商家出示劵码即可消费。</p>
                    </div>
                    <div className="BOorderStatus">

                                    <div>
                                        <div className="BO_quanma">
                                            <span>劵码</span><b className="quanmaFont">{this.state.code}</b>
                                            <span className="quanmaStatus">{this.state.status==1?'待使用':'已完成'}</span>
                                        </div>
                                    </div>


                    </div>
                </div>
                }


                <div className="BOorder3">
                    <div  className="BOorderInfo">
                        <div className="BOorder3Img">
                            <span className="BOImgStyle">
                                <img src={this.state.minPic} alt=""/>
                            </span>
                        </div>
                        <div className="BOorder3title">
                            {this.state.title}
                        </div>
                    </div>
                    <div className="BOorderStatus" onClick={this.callPhone.bind(this)}>
                       <span className="BOorder3phone">
                           <img src={phone} alt="" width='50%'/>
                       </span>
                        <div className="BOorder3name">{this.state.skuPhone}</div>
                        <span className="BOorder3next">
                           <img src={next} alt="" width='50%'/>
                       </span>
                    </div>
                </div>

                <div className="BOorder4">
                    <div className="BOorder4Title">用户信息</div>

                    <div className="BOorder4Info">
                        <label>手机号码</label>
                        <span>{this.state.phone}</span>
                    </div>

                    <div className="BOorder4Info">
                        <label>用户姓名</label>
                        <span>{this.state.name}</span>
                    </div>
                </div>
                {/*/!*{this.state.status===0&&*!/*/}
                {/*<div className="BO_Buy" onClick={()=>{*/}
                    {/*cookie.save('orderType',2);*/}
                    {/*cookie.save('orderId',this.state.id);*/}
                    {/*this.gotoIcbcPay(this.state.id);*/}
                    {/*//window.location.href=port+'/card/icbc/api/pay/'+this.state.id+'?type=2';*/}
                {/*}*/}
                {/*}>*/}
                    {/*去付款*/}
                {/*</div>}*/}
                <Dialog type="ios" title={this.state.style2.title} buttons={this.state.style2.buttons} show={this.state.showIOS2}>
                    {this.state.dialogDetail}
                </Dialog>
                <Dialog type="ios" title={this.state.cancelStyle2.title} buttons={this.state.cancelStyle2.buttons} show={this.state.showIOS3}>
                    {this.state.cancelStyle2.title}
                </Dialog>
            </div>

        )
    }
}

